<template>
  <div>
    <h1>App</h1>
    <button @click="changeSonName">修改sonName</button>

    <Hello :name="sonName" age="18" />

    <hr />

    <World name="张三" age="18" @change="sonName += '!'">
      <template #default="scoped">
        <button>默认插槽内容 {{ scoped }}</button>
      </template>

      <template #top>
        <button>Top插槽内容</button>
      </template>
    </World>
  </div>
</template>

<script>
import { ref } from "vue";
import Hello from "./components/Hello.vue";
import World from "./components/World.vue";

export default {
  components: {
    Hello,
    World,
  },

  setup() {
    const sonName = ref("张三");

    const changeSonName = () => {
      sonName.value += "~";
    };

    return {
      sonName,
      changeSonName,
    };
  },
};
</script>
